<template>
  <!-- <span>这是接口测试页面</span>  -->
  <el-row style="height: 100%;">
    <el-col
      style="padding: 0 8px 0 8px;width: 260px;height: 100%;overflow: auto;border-right: 1px solid #eee;"
    >
      <el-row>
        <h2 style="padding: 8px 0 8px 4px;font-weight: bold;font-size: 18px;">
          用例
        </h2>
        <el-col
          :span="24"
          style="margin-bottom: 8px;flex-wrap: nowrap;display: flex;"
        >
          <el-input
            placeholder="Search"
            prefix-icon="el-icon-search"
            v-model="searchKey"
            class="one"
            size="small"
          >
          </el-input>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-delete"
            style="margin-left: 8px;"
            @click="handleReset"
            >重置</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-tree
            class="filter-tree"
            node-key="id"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            highlight-current
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleTreeNodeClick"
            :render-content="renderContent"
          >
          </el-tree>
        </el-col>
      </el-row>
    </el-col>
    <el-col
      style="padding: 0 8px 0 8px;width: calc(100% - 260px);overflow: auto;height: 100%"
    >
      <InterfaceDetail v-if="$store.state.selectedInterface" />
      <Empty v-else text="请选择接口" />
    </el-col>
    <el-drawer
      title="Batch Executtion Results"
      :visible="executeDrawerVisible"
      direction="rtl"
      size="50%"
      @close="executeDrawerVisible = false"
    >
      <ExecuteResult />
    </el-drawer>

  </el-row>
</template>
<script>
import { send } from "q";
import { casesList } from "@/mock/constants";
import Empty from "@/components/empty";
import InterfaceDetail from "./interfaceDetail.vue";
import ExecuteResult from "./executeResult.vue";
export default {
  data() {
    return {
      searchKey: "",
      treeData: casesList,
      defaultProps: {
        children: "children",
        label: "label"
      },
      executeDrawerVisible: false,
      dialogVisible: false
    };
  },

  components: { Empty, InterfaceDetail, ExecuteResult },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 重置搜索
    handleReset() {
      this.searchKey = "";
      this.$refs.tree.setCheckedKeys([]);
    },
    handleTreeNodeClick(data) {
      if (data.data) {
        // 点击的是具体的数据，而不是某一个父级节点
        this.$store.commit("setSelectedInterface", data);
      } else {
        this.$store.commit("setSelectedInterface", null);
      }
    },
    renderContent(h, { node, data, store }) {
      if (data.children) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <i
                class="el-icon-plus"
                on-click={e => this.append(e, data)}
                style="margin-right:8px"
              ></i>
              <i
                class="el-icon-s-promotion"
                on-click={e => this.executeAllCases(e, data)}
              ></i>
            </span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <i
                class="el-icon-delete"
                on-click={e => this.remove(e, node, data)}
              ></i>
            </span>
          </span>
        );
      }
    },
    append(e, data) {
      e.stopPropagation();
      const newChild = {
        id: new Date().getTime(),
        label: `测试新增${new Date().getTime()}`,
        data: {
          name: `测试新增${new Date().getTime()}`
        }
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    remove(e, node, data) {
      e.stopPropagation();
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    executeAllCases(e, data) {
      e.stopPropagation();
      this.executeDrawerVisible = true;
    }
  },
  watch: {
    searchKey(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {}
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node > span {
  margin-right: 8px;
}
</style>
